<template lang="">
  <div>
    <div
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>
  </div>
</template>
<script>
const echarts = require("echarts/lib/echarts");
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    textColor: {
      type: String,
      default: "#ccc"
    },
    xAxisName: {
      type: String,
      default: "T"
    },
    yAxisName: {
      type: String,
      default: "S"
    },
    title: {
      type: String,
      default: ""
    },
    originData: {
      type: Object,
      default: () => {}
    },
    contrasData: {
      type: Object,
      default: () => {}
    },
    xMax: {
      type: Number,
      default: 0
    },
    yMax: {
      type: Number,
      default: 0
    },
    xData: {
      type: Array,
      default: () => []
    }
  },

  watch: {
    contrasData() {
      this.$nextTick(() => {
        this.init();
      });
    }
  },

  methods: {
    init() {
      const { xData, xMax, yMax, title, originData, contrasData, xAxisName, yAxisName, textColor } = this.$props;

      const stOption = {
        tooltip: {
          trigger: "axis"
        },

        grid: {
          bottom: "10%",
          top: "18%"
        },

        xAxis: {
          name: xAxisName,
          nameLocation: "end",
          type: "category",
          boundaryGap: false,
          splitNumber: 5,
          min: 0,
          max: xMax,
          data: xData,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: textColor,
              width: 1
            }
          }
        },
        yAxis: {
          name: yAxisName,
          nameLocation: "end",
          max: yMax,

          splitNumber: 5,
          min: 0,
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: textColor,
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          }
        },
        series: [
          // {
          //   name: "S-T曲线",
          //   type: "line",
          //   step: "end",
          //   lineStyle: {
          //     color: "#3DE2FF"
          //   },
          //   itemStyle: {
          //     color: "rgb(33,148,246)",
          //     borderWidth: 1,
          //     borderColor: "#3DE2FF"
          //   },
          //   data: [2, 6, 25, 35, 36, 36, 37, 39, 40, 63, 63, 63, 63, 66, 73, 74]
          // }
        ]
      };

      if (title) {
        const chartTitle = {
          text: title,
          left: "center"
        };
        stOption.title = chartTitle;
      }

      if (originData && Object.keys(originData).length) stOption.series.push(originData);

      if (contrasData && Object.keys(contrasData).length) stOption.series.push(contrasData);

      const dom = document.getElementById(this.$props.id);
      const stChart = echarts.init(dom);
      stChart.setOption(stOption);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
<style lang=""></style>
